<template>
	<view class="content" v-if="Object.keys(userInfo).length > 0">
		<u-navbar bgColor="rgba(242, 245, 242, 1)" :placeholder="true" :fixed="true" @leftClick="$back" title="" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<view class="topbox">
			<image :src="userInfo.writer_level.level.image | formatImgUrl" class="topic" mode="" v-if="userInfo.writer_level.is_active"></image>
			<image :src="userInfo.writer_level.level.hide_img | formatImgUrl" class="topic" mode="" v-else></image>
			<view class="totitle">
				本周保灯总计需要 
				<text>{{userInfo.writer_level.level.relegation}}</text>
				 经验值
			</view>
			<view class="todes">
				（本周已获得{{userInfo.writer_level.level.week_exp}}经验值）
			</view>
		</view>
		
		<view class="wrap">
			<view class="tiao">
				<view class="titxt">
					lv.{{userInfo.writer_level.level.title}}
				</view>
				<view class="ticen">
					<u-line-progress activeColor="#45C4B0" height="12rpx" inactiveColor="rgba(153, 153, 153, 0.1);" :percentage="((userInfo.writer_exp - userInfo.writer_level.level.exp) / (nextExp(userInfo.writer_exp) - userInfo.writer_level.level.exp)) * 100" :showText="false"></u-line-progress>
				</view>
				<view class="titxt">
					lv.{{(parseInt(userInfo.writer_level.level.title) + 1 > 50)?'max':(parseInt(userInfo.writer_level.level.title) + 1)}}
				</view>
			</view>
			<view class="yan">
				<view class="yantxt"> 
					{{userInfo.writer_exp - userInfo.writer_level.level.exp}}经验值 <text v-if="userInfo.writer_level.is_deng" style="color: #4ACEB1;">（已保灯）</text>
				</view>
				<view class="yantxt" v-if="parseInt(userInfo.writer_level.level.title) + 1 > 50">
					已达上限
				</view>
				<view class="yantxt" v-else>
					升级还需要{{nextExp(userInfo.writer_exp) - userInfo.writer_exp}}经验值
				</view>
			</view>
			<view class="title">
				什么是写手等级？
			</view>
			<view class="jtxt">
				写手等级是用户累计完成接单流水的象征，创作越多等级越高，只要完成创作内容，就能获得相应经验值提升写手等级。
			</view>
			<view class="title">
				写手等级如何展示？
			</view>
			<view class="jtxt">
				在聊天及动态，展示在你的头像上；其他人点击进入你的个人页也可以看到你的段位等级哦！除此之外还会展示在你的个人资料页上。
			</view>
			<view class="title">
				等级图标如何保灯？
			</view>
			<view class="jtxt">
				等级图标有保灯机制，每周结算一次，不同等级的保灯所需经验不同，结算周期内未达到指定经验值，等级图标将会处于灭灯状态 
			</view>
			
			<view class="table">
				<view class="taleft">
					<view class="text">
						等级图标
					</view>
				</view>
				<view class="line"></view>   
				<view class="taleft">
					<view class="text">
						等级范围
					</view>
				</view>
			</view>
			<view class="tabli">
				<view class="taleft">
					<image :src="'/images/eaa.png' | formatImgUrl" class="pic" mode=""></image>
					<image :src="'/images/ea.png' | formatImgUrl" class="pic" mode=""></image>
					
				</view>
				<view class="line"></view>
				<view class="taleft">
					<view class="text">
						1-10
					</view>
				</view>
			</view>
			<view class="tabli">
				<view class="taleft">
					<image :src="'/images/eba.png' | formatImgUrl" class="pic" mode=""></image>
					<image :src="'/images/eb.png' | formatImgUrl" class="pic" mode=""></image>
					
				</view>
				<view class="line"></view>
				<view class="taleft">
					<view class="text">
						11-20
					</view>
				</view>
			</view>
			<view class="tabli">
				<view class="taleft">
					<image :src="'/images/eca.png ' | formatImgUrl" class="pic" mode=""></image>
					<image :src="'/images/ec.png' | formatImgUrl" class="pic" mode=""></image>
					
				</view>
				<view class="line"></view>
				<view class="taleft">
					<view class="text">
						21-30
					</view>
				</view>
			</view>
			<view class="tabli">
				<view class="taleft">
					<image :src="'/images/eda.png' | formatImgUrl" class="pic" mode=""></image>
					<image :src="'/images/ed.png' | formatImgUrl" class="pic" mode=""></image>
					
				</view>
				<view class="line"></view>
				<view class="taleft">
					<view class="text">
						31-40
					</view>
				</view>
			</view>
			<view class="tabli">
				<view class="taleft">
					<image :src="'/images/eea.png' | formatImgUrl" class="pic" mode=""></image>
					<image :src="'/images/ee.png' | formatImgUrl" class="pic" mode=""></image>
					
				</view>
				<view class="line"></view>
				<view class="taleft">
					<view class="text">
						41-50  
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	
	export default {
		data() {
			return {
				uid:this.$db.get('userInfo').membe_id,
				userInfo: {},
				writerList: [],
				equityNum:0
			}
		},
		onLoad(e) { 
			if(e.uid){
				this.uid = e.uid
			}
			this.getUserInfo()
			this.getWriterList()
		},
		methods: {
			numEquity(title){
				var size = ['一','二','三','四','五','六','七','八','九','十']
				for (var i = 0; i < this.writerList.length; i++) {
					if (this.writerList[i].title === title) {
						this.equityNum = i
						return size[i]
						break;
					}
				}
			},
			nextExp(exp) {
				for (var i = 0; i < this.writerList.length; i++) {
					if (this.writerList[i].exp > exp) {
						return this.writerList[i].exp
						break;
					}
				}
			},
			getWriterList(){
				this.$api.default.request('user/writerList').then((res) => {
					if (res.code) {
						this.writerList = res.data
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			getUserInfo() {
				this.$api.default.request('user/userInfo',{uid:this.uid}).then((res) => {
					if (res.code) {
						this.userInfo = res.user
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(242, 245, 242, 1);
	}

	.content{
		.topbox{
			text-align: center;
			padding: 20rpx 0 38rpx;
			.topic{
				width: 300rpx;
				height: 132rpx;
				margin: 0 auto;
			}
			.totitle{
				font-size: 28rpx;
				color: #3d3d3d;
				font-weight: bold;
				text{
					color: #45C4B0;
					font-weight: bold;
					line-height: 40rpx;
					font-size: 28rpx;
					padding: 0 5rpx;
				}
			}
			.todes{
				font-size: 20rpx;
				color: #999999;
			}
		}
		.wrap{
			padding: 0 30rpx;
			.tiao{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 5rpx;
				.titxt{
					font-size: 24rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
				}
				.ticen{
					width: 510rpx;
					flex-shrink: 0;
				}
			}
			.yan{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 40rpx;
				.yantxt{
					font-size: 20rpx;
					font-weight: normal;
					letter-spacing: 0em;
					color: #999999;
				}
			}
			.title{
				font-size: 28rpx;
				padding-bottom: 12rpx;
				font-weight: bold;
				letter-spacing: 0px;
				color: #333333;
			}
			.jtxt{
				line-height: 28rpx;
				padding-bottom: 40rpx;
				font-size: 20rpx;
				font-weight: normal;
				letter-spacing: 0px;
				color: #999999;
			}
		}
		.table{
			display: flex;
			align-items: center;
			background-color: #ffffff;
			border: 1px solid #E5E5E5;
			height: 60rpx;
			.line{
				height: 100%;
				width: 1rpx;
				background-color: #e5e5e5; 
			}
			.taleft{
				height: 60rpx;
				width: 49.5%;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.text{
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
		.tabli{
			display: flex;
			align-items: center;
			border: 1px solid #E5E5E5;
			border-top: none;
			height: 80rpx;
			.line{
				height: 100%;
				width: 1rpx;
				background-color: #e5e5e5; 
			}
			.taleft{
				height: 80rpx;
				width: 49.5%;
				display: flex;
				align-items: center;
				justify-content: center;
				.pic{
					width: 76rpx;
					height: 66rpx;
					margin: 0 10rpx;
				}
				.text{
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}
</style>